<template>
  <div>
    <!-- :class="对象|数组",对象根据boolean值,true接收属性,false，不接受属性 -->
    <!-- 接受数组，接受数组上元素所有属性 -->
    <!-- 注意：对象没有顺序问题，但css(层叠样式表)会存在数据覆盖的问题 -->
    <div class="box" :class="obj"></div>
    <div class="box" :class="{ pink: isPink, orange: isOrange }"></div>
    <div class="box" :class="arr"></div>
    <!-- :style接受样式对象 -->
    <div :style="obj1"></div>
    <div :style="{width:'200px',height:'200px',backgroundColor:'pink'}"></div>
    <div :style="[obj1,obj2]"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      obj:{
        pink:true,
        orange:true,
      },
      isPink:true,
      isOrange:false,
      //这里不是css样式，是JS对象；
      obj1:{
        width:'200px',
        height:'200px',
        backgroundColor:'pink',
      },
      obj2:{
        borderRadius:"50%"
      },
      arr:['orange','big','circle']
    }
  }
};
</script>

<style lang="less">
.box {
  width: 100px;
  height: 100px;
  border: 2px solid #000;
  margin: 10px;
}

.pink {
  background-color: pink;
}

.orange {
  background-color: orange;
}

.big {
  width: 200px;
  height: 200px;
}

.circle {
  border-radius: 50%;
}

</style>
